<template>
	<view class="page_main page_render" :class="{ can_show: render_req }">
		<pagelogin ref="pagelogin" @loginready="pagerefresh" @initcallback="com_pagelogin_initcallback($event)" need_login="0">
			<diynav ref="diynav" :navstyle="{ background: '#383950' }" isFixed back hasHeight title="用户订单" @settop="set_pagetop($event)"></diynav>

			<!-- <me-tabs v-model="tabCurrentIndex" :tabs="tabBars" :tabheight="50" ratio="0.4" @settab="set_pagetab($event)" v-if="page_render"></me-tabs> -->
			<view class="section_tabs">
				<!-- 0.4 -->
				<me-tabs v-model="tabCurrentIndex" :tabs="tabBars" :tabheight="50" :ratio="0.4" :show_number="4" :line_bot="20" @settab="set_pagetab($event)"></me-tabs>
			</view>
			<!-- @change="tab_change" -->
			<!-- 下拉刷新组件 -->
			<view class="section_refresh">
				<mix-pulldown-refresh
					ref="mixPulldownRefresh"
					class="panel-content"
					:status="tabItem.loadMoreStatus"
					@shuaxin="shuaxin"
					:top="change_var.page_content_top"
					:statusBarHeight="0"
					:bottom="0"
					@refresh="onPulldownReresh"
					@setEnableScroll="setEnableScroll"
				>
					<swiper id="swiper" class="swiper-box" :duration="300 + othertime" :current="tabCurrentIndex" @change="changeTab">
						<swiper-item v-for="(tabItem, tabIndex) in tabBars" :key="tabIndex">
							<scroll-view class="scroll_Y" @scroll="scroll_f" :scroll-y="enableScroll" @scrolltolower="loadMore">
								<!-- 空白页 -->
								<empty v-if="tabItem.loadMoreStatus == 2 && !objJudge(tabItem.list)"></empty>
								<!-- 订单列表 -->
								<view
									class="list-order-p"
									:style="{
										paddingBottom: `${COMMON_VAR.safeAreaInsets_bot}rpx`,
									}"
								>
									<view class="list-order" v-if="tabItem.list.length">
										<view class="item" v-for="(item, index) in tabItem.list" :key="index" :class="item.s_class">
											<view class="hd jj_kb_a">
												<view class="number ell">
													{{ item.orderNumber }}
												</view>
												<view class="status">
													{{ item.tips }}
												</view>
											</view>
											<view class="bd">
												<view class="tt" v-if="objJudge(item.order_desc)">
													<view class="lab">订单类型：</view>
													<view class="val">
														{{ item.order_desc }}
													</view>
												</view>
												<view class="tt" v-if="objJudge(item.paymentMethod)">
													<view class="lab">支付方式：</view>
													<view class="val">
														{{ item.paymentMethod }}
													</view>
												</view>
												<view class="tt" v-if="objJudge(item.ordertime)">
													<view class="lab">订单日期：</view>
													<view class="val">
														{{ happenTimeFun(item.ordertime) }}
													</view>
												</view>
												<view class="tt isprice">
													<view class="lab">订单金额：</view>
													<view class="price">
														<smallPrice :min="item.amountActually" :r="24" :b="42" :s="42" :m="24" bold :decimal="2"></smallPrice>
													</view>
												</view>
											</view>
										</view>
									</view>
									<loading :shuaxin_ing="shuaxin_ing" :loadMoreStatus="tabItem.loadMoreStatus" :text="text" v-if="tabItem.list.length"></loading>
								</view>
							</scroll-view>
						</swiper-item>
					</swiper>
				</mix-pulldown-refresh>
			</view>
		</pagelogin>
	</view>
</template>

<script>
function initItem(item) {
	let s_icon = {
		ok: '/pagesA/static/images/icon/yiwancheng_dianliang.png',
		dai: '/pagesA/static/images/icon/daifukuan_dianliang.png',
		cancel: '/pagesA/static/images/icon/yiwancheng_dianliang.png',
		fa: '/pagesA/static/images/icon/daishouhuo_dianliang.png',
		shou: '/pagesA/static/images/icon/daishouhuo_dianliang.png',
	};
	let status = '';
	let tips = '';
	let _nubmer = (item.paymentStatus = parseInt(item.paymentStatus));
	if (item.is_refund == 1) {
		_nubmer = -1;
	}
	switch (_nubmer) {
		case -1:
			tips = '已退款';
			status = 'isfail';
			break;
		case 1:
			tips = '待支付';
			status = '';
			break;
		case 2:
			tips = '已付款';
			status = 'isok';
			break;
		case 3:
			tips = '支付失败';
			status = '';
			break;
		case 4:
			tips = '已取消';
			status = 'iscancel';
			break;
	}
	item.tips = tips;
	item.s_class = status;

	return item;
}

let scrollTimer = false;
import storeMixin from '@/store/storeMixin';
export default {
	mixins: [storeMixin],
	data() {
		return {
			change_var: {},

			scrollTop: 0,
			render_component_init: false,
			page_render: false,
			page_title: '',
			render_req: false,
			nextreq: true,
			load: 1,
			shuaxin_ing: 0,
			text: ['上拉加载更多', '刷新订单中...', '没有更多信息~'],
			tabCurrentIndex: 0,
			enableScroll: true,
			tabBars: [
				{
					state: 0,
					title: '全部',
					loadingType: 'more',
					list: [],
				},
				{
					state: 2,
					title: '已付款',
					loadingType: 'more',
					list: [],
				},
				{
					state: 4,
					title: '已取消',
					loadingType: 'more',
					list: [],
				},
				{
					state: 5,
					title: '已退款',
					loadingType: 'more',
					list: [],
				},
			],
			classstate: '',
			othertime: 50, //跨标签切换，每个标签运动时间增加量 ms
			itemData: {},
			orderitemnum: {},
			chuandi: 0,
		};
	},
	created() {},
	onLoad(options) {
		this.classstate = options.state || '';
		this.init_pagedata();
	},
	onShow() {
		this.com_onshow_fun();
	},
	onHide() {
		this.com_page_hide(this);
	},
	onPageScroll(e) {
		this.scrollTop = e.scrollTop;
	},
	onPullDownRefresh() {
		this.pagerefresh(1);
	},
	onShareAppMessage(res) {},
	onShareTimeline(res) {},
	methods: {
		copyfin(e) {
			let _this = this;
			this.privacy_show_Judge('show_privacys').then(result => {
				if (result) {
					// 需要弹窗
					that.$refs.privacybox.propshow();
					return;
				}
			});
			uni.setClipboardData({
				data: e,
			});
		},

		pagerefresh(type = 0) {
			let _this = this;
			// _this.startPulldownJudge(type);
			_this.com_page_show(_this);
			_this.com_loading_fun();
			_this.loadTabbars();
			if (_this.classstate) {
				_this.gostate(_this.classstate);
			}
		},

		//获取订单数
		getOrdernum() {
			let _this = this,
				usertoken = uni.getStorageSync('usertoken');
			uni.request({
				header: this.headers,
				data: {
					usertoken: usertoken,
				},
				method: 'GET',
				url: this.apiUrl + this.apiFilename + '/orderapi.php?act=getordercount',
				success(res) {
					let data = res.data;
					if (data.status == 1) {
						_this.orderitemnum = data.data;
					} else {
						_this.$api.msg(data.msg);
					}
				},
				fail: res => {
					uni.showToast({
						icon: 'none',
						title: '网络请求错误',
					});
				},
			});
		},

		gostate(e) {
			let tabList = this.tabBars;
			tabList.forEach((item, index) => {
				if (item.state == e) {
					this.changeTab(index);
				}
			});
		},

		//获取订单列表
		loadTabbars() {
			let tabList = this.tabBars;
			tabList.forEach((item, index) => {
				// item.list = [];
				item.loadMoreStatus = 0; //加载更多 0加载前，1加载中，2没有更多了
				item.refreshing = 0;
				item.page = 1;
				item.ts = 0;
				item.limit = 20;
				item.scrollTop = 0;
			});
			this.tabBars = tabList;
			this.loadNewsList('add');
			this.com_loading_fun({ mode: 0 });
			this.load = 1;
		},

		//列表
		loadNewsList(type) {
			let _this = this;
			let tabIndex = this.tabCurrentIndex;
			let tabItem = this.tabBars[this.tabCurrentIndex];
			let state = this.tabBars[this.tabCurrentIndex].state;

			if (tabItem.loadMoreStatus == 1) return;
			//type add 加载更多 refresh下拉刷新

			if (type == 'add') {
				if (tabItem.loadMoreStatus == 2) {
					return;
				}
				tabItem.loadMoreStatus = 1;
			}
			// #ifdef APP-PLUS
			if (type == 'refresh') {
				tabItem.refreshing = true;
			}
			// #endif

			if (type == 'refresh') {
				tabItem.loadMoreStatus = 1;
				tabItem.page = 1;
			}

			_this.getorder(tabItem, tabIndex, type, state);
		},
		getorder(chuanjson, chuanIndex, type, order_status) {
			let _this = this;
			let _tabitem = this.tabBars[chuanIndex];

			let page = _tabitem.page;
			let limit = _tabitem.limit;
			let user_id = uni.getStorageSync('userid');
			let data = {
				user_id,
				page,
				limit,
				order_status,
			};
			data = _this.data_handle(data);

			uni.request({
				header: _this.header_handle(_this.headers),
				data,
				method: 'POST',
				url: _this.apiUrl + _this.apiFilename + '/order/list',
				success(res) {
					let data = res.data;
					let back_count = _this.objJudge(data.data) ? data.data.length : 0;
					uni.hideLoading();
					if (data.state == 1) {
						if (type === 'refresh') {
							_tabitem.list = [];
						}
						if (type === 'add') {
							let nowjson = _tabitem.list;
						}
						for (var i = 0; i < data.data.length; i++) {
							let item = initItem(data.data[i]);
							_tabitem.list.push(item);
						}
					} else {
						// _this.com_msg('网络请求错误');
						_tabitem.loadMoreStatus = 2;
					}

					// setTimeout(function () {

					if (limit <= back_count && back_count > 0) {
						_tabitem.loadMoreStatus = 0;
						_tabitem.page = page + 1;
					} else {
						// setTimeout(() => {
						_tabitem.loadMoreStatus = 2;

						// _this.$set(_tabitem, 'loadMoreStatus', 2)
						// }, 300);
					}

					//下拉刷新 关闭刷新动画
					if (type === 'refresh') {
						_this.$refs.mixPulldownRefresh && _this.$refs.mixPulldownRefresh.endPulldownRefresh();
						// #ifdef APP-PLUS
						_tabitem.refreshing = false;
						// #endif
						// chuanjson.loadMoreStatus = 0;
						// if (chuanjson.loadMoreStatus != 2) chuanjson.loadMoreStatus = chuanjson.list.length >= chuanjson.count || chuanjson.list.length == 0 ? 2 : 0;
					}

					// }, 200);
					_this.$forceUpdate();
				},
				fail: res => {
					uni.hideLoading();
					uni.showToast({
						icon: 'none',
						title: '网络错误',
					});
				},
				complete: res => {},
			});
		},
		//下拉刷新
		onPulldownReresh() {
			this.loadNewsList('refresh');
		},
		scroll_f(e) {
			let tabItem = this.tabBars[this.tabCurrentIndex];
			tabItem.scrollTop = e.detail.scrollTop;
		},

		//上滑加载
		loadMore() {
			this.loadNewsList('add');
		},

		//设置scroll-view是否允许滚动，在小程序里下拉刷新时避免列表可以滑动
		setEnableScroll(enable) {
			if (this.enableScroll !== enable) {
				this.enableScroll = enable;
			}
		},

		//tab切换
		async changeTab(e) {
			if (scrollTimer) {
				//多次切换只执行最后一次
				clearTimeout(scrollTimer);
				scrollTimer = false;
			}
			let index = e;
			//e=number为点击切换，e=object为swiper滑动切换
			if (typeof e === 'object') {
				index = e.detail.current;
			}
			let cc = index - this.tabCurrentIndex;
			if (cc < 0) cc = -1 * cc;
			if (typeof e === 'number') {
				//点击切换时先切换再滚动tabbar，避免同时切换视觉错位
				this.othertime = cc * 50;
				this.tabCurrentIndex = index;
			} else {
				this.othertime = cc * 50;
			}
			//延迟300ms,等待swiper动画结束再修改tabbar
			scrollTimer = setTimeout(() => {
				let tabItem = this.tabBars[this.tabCurrentIndex];
				if (typeof e === 'object') {
					this.tabCurrentIndex = index;
				}
				this.tabCurrentIndex = index;
				if (this.tabCurrentIndex != this.chuandi) {
					this.loadNewsList('add');
				} else {
					if (tabItem.scrollTop < 300 && tabItem.loadMoreStatus != 2) {
						this.loadNewsList('refresh');
					}
				}
			}, 100);
		},

		shuaxin(e) {
			this.shuaxin_ing = e;
		},
	},
	watch: {},
};
</script>

<style lang="scss">
::-webkit-scrollbar {
	width: 0rpx;
}

page {
	// background: #f5f6f7;
	// height: 100vh;
	// overflow: hidden;
}

.swiper-box {
	height: 100%;
	box-sizing: border-box;
}

.scroll_Y {
	height: 100%;
}

.list-order {
	padding: 0 30rpx;

	.item {
		background: #3f425a;
		padding: 0rpx 20rpx 30rpx;
		border-radius: 10rpx;

		&:not(:first-child) {
			margin-top: 20rpx;
		}

		--status_class: #ffffff;

		&.isok {
			--status_class: #1fd5ca;
		}

		&.isfail {
			--status_class: #ff5656;
		}

		&.iscancel {
			--status_class: #999999;
		}

		.hd {
			height: 84rpx;
			color: #ffffff;
			font-size: 32rpx;

			display: flex;
			align-items: center;
			justify-content: space-between;

			&::after {
				background-color: #27283b;
			}

			.number {
				padding-right: 10rpx;
			}

			.status {
				white-space: nowrap;
				padding-left: 16rpx;
				flex-shrink: 0;
				font-size: 28rpx;
				color: var(--status_class);

				// &.hui {
				// 	color: #929292;
				// 	font-weight: normal;
				// }
			}
		}

		.bd {
			padding-top: 18rpx;

			.tt {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 500;
				color: #ffffff;
				line-height: 46rpx;

				&.isprice {
					align-items: flex-end;
					margin-top: 20rpx;

					.lab {
						line-height: 1;
					}
				}
			}
		}
	}
}

.sk-loader {
	margin-top: 28rpx;
}

/*确认支付*/
.paytoask {
}

.tis_container {
	width: 100%;

	.title {
		height: 108rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 32rpx;
		color: #000000;
		font-weight: bold;
		position: relative;

		.close {
			width: 108rpx;
			height: 108rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 26rpx;
			color: #656565;
			position: absolute;
			right: 0;
			top: 0;
		}
	}

	.scroll_Y {
		height: 650rpx;

		.coulist {
			padding-right: 24rpx;

			.item {
				position: relative;
				overflow: hidden;
				transform: translate3d(0, 0, 0);
				backface-visibility: hidden;
				display: flex;
				align-items: stretch;
				margin-top: 24rpx;

				&:last-child {
					margin-bottom: 24rpx;
				}

				.pbg {
					width: 100%;
					height: 150rpx;
				}

				.check {
					width: 74rpx;
					flex-shrink: 0;

					.ucheckbox {
						box-shadow: none;
					}
				}

				.count {
					position: absolute;
					top: 1rpx;
					right: 10rpx;
					color: #f4d96c;
					z-index: 2;
					font-size: 20rpx;
				}

				.info {
					position: absolute;
					top: 0;
					left: 0;
					z-index: 2;
					width: 100%;
					height: 100%;
					padding: 0 30rpx;
					box-sizing: border-box;
					font-size: 28rpx;

					.price {
						color: #2c2c2c;
						font-weight: bold;
						font-size: 40rpx;
					}

					.text {
						font-size: 24rpx;
						color: #383838;
						margin-top: 4rpx;
					}

					.time {
						color: #784410;
						font-size: 22rpx;
					}
				}
			}
		}
	}

	.content_4 {
		font-size: 28rpx;
		color: #000000;
		padding: 30rpx;

		.pay-container {
			font-size: 28rpx;

			.price {
				color: #ff7529;
			}

			.pay_price {
				width: 100%;
				height: 80rpx;
				background: #fdf7e4;
				border-radius: 8rpx;
			}

			.pay_mt {
				margin-top: 24rpx;
			}

			.status {
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				background-color: #434343;
				font-size: 20rpx;
				color: #f4d96c;

				&.on {
					background-color: #f6bc12;
				}
			}
		}
	}

	.t_btn {
		width: 266rpx;
		height: 84rpx;
		border-radius: 8rpx;
		font-size: 30rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&.t_grey {
			background: #f0f0f0;
			color: #999999;
		}
	}
}

.copy {
	width: 30rpx;
	height: 30rpx;
	display: inline-block;
	margin-left: 10rpx;
	flex-shrink: 0;
	margin-top: 4rpx;
}

.ordernum {
	font-size: 26rpx;
}
</style>
